<template>
	<ComPop
		v-model="show"
		width="600px"
		title="新增地址"
		@saveSubmit="saveAddress"
	>
		<div class="mb-4">
			<!-- 地图组件占位，可集成高德/百度地图 -->
			<div class="map-placeholder mb-2">
				<div class="w-full h-full" id="map-container"></div>
			</div>
			<el-input
				v-model="searchKeyword"
				placeholder="搜地点、查公交、找路线"
				class="mb-2"
				suffix-icon="el-icon-search"
				@keyup.enter="handleSearch"
			>
				<template #append>
					<el-icon class="el-input__icon"><Search /></el-icon>
				</template>
			</el-input>
		</div>
		<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
			<el-form-item label="地址简称" prop="title">
				<el-input
					v-model="form.title"
					maxlength="10"
					show-word-limit
					placeholder="请输入地址简称"
				/>
			</el-form-item>
			<el-form-item label="所在地区" prop="region">
				<el-cascader
					class="w-full"
					v-model="form.region"
					:options="regionOptions"
					:props="{ checkStrictly: true, emitPath: false }"
					filterable
					placeholder="请选择省/市/区/街道"
				/>
			</el-form-item>
			<el-form-item label="详细地址" prop="detail">
				<el-input
					v-model="form.detail"
					maxlength="100"
					show-word-limit
					placeholder="请输入详细地址"
				/>
			</el-form-item>
			<el-form-item label="联系人" prop="contact">
				<el-input
					v-model="form.contact"
					maxlength="20"
					show-word-limit
					placeholder="请输入联系人"
				/>
			</el-form-item>
			<el-form-item label="手机号" prop="phone">
				<el-input
					v-model="form.phone"
					maxlength="11"
					placeholder="请输入手机号"
				/>
			</el-form-item>
			<el-form-item>
				<el-radio v-model="form.isDefault" :label="true">默认地址</el-radio>
			</el-form-item>
		</el-form>
	</ComPop>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { loadAmap } from '/@/utils/mapLoad';

import { regionData } from '/@/utils/chinaArea';
import { Search } from '@element-plus/icons-vue';

const show = ref(false);
const formRef = ref();
const searchKeyword = ref('');
const regionOptions = ref(regionData); // 省市区街道四级联动数据，需从接口或字典获取
const form = reactive({
	title: '',
	region: [],
	detail: '',
	contact: '',
	phone: '',
	isDefault: false,
});
const rules = {
	title: [
		{ required: true, message: '请输入地址简称', trigger: 'blur' },
		{ min: 2, max: 10, message: '地址简称长度为2-10个字符', trigger: 'blur' },
	],
	region: [{ required: true, message: '请选择所在地区', trigger: 'change' }],
	detail: [
		{ required: true, message: '请输入详细地址', trigger: 'blur' },
		{ min: 2, max: 100, message: '详细地址长度为2-100个字符', trigger: 'blur' },
	],
	contact: [
		{ required: true, message: '请输入联系人', trigger: 'blur' },
		{ min: 2, max: 20, message: '联系人长度为2-20个字符', trigger: 'blur' },
	],
	phone: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{
			pattern: /^1[3-9]\d{9}$/,
			message: '请输入正确的手机号',
			trigger: 'blur',
		},
	],
};
const emit = defineEmits(['saveAddress']);
function handleSearch() {
	// TODO: 地图/地址搜索逻辑
}
function saveAddress() {
	formRef.value.validate((valid: boolean) => {
		if (valid) {
			emit('saveAddress', { ...form });
			show.value = false;
		}
	});
}

async function open(addr?: any) {
	if (addr) {
		Object.assign(form, addr);
	} else {
		form.title = '';
		form.region = [];
		form.detail = '';
		form.contact = '';
		form.phone = '';
		form.isDefault = false;
	}
	show.value = true;
	await nextTick();
	loadAmap().then((AMap) => {
		let map = new AMap.Map('map-container', {
			center: [104.066392, 30.672921],
			zoom: 12,
			zoomEnable: false,
		});
	});
}
defineExpose({ open });
</script>
<style scoped>
.map-placeholder {
	width: 100%;
	height: 300px;
	background: #f4f4f4;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
}
</style>
